<template>
    <div id="container"></div>
</template>

<script setup>
import { onMounted } from "vue"
import * as PIXI from "pixi.js"

console.log(PIXI)

async function init(){
    const app = new PIXI.Application()
    await app.init({
        resizeTo: document.getElementById("container"),
        backgroundColor: "#ddd",
        resolution: window.devicePixelRatio || 1,
        antialias: true,     // Enable antialiasing
        preference: 'webgl', // or 'webgpu' // Renderer preference
    })

    document.querySelector("#container").appendChild(app.canvas)


    const container = new PIXI.Container()
    app.stage.addChild(container)


    const rectangle = new PIXI.Graphics();
    rectangle.rect(0 ,0 ,30,30)
    rectangle.x = 30;
    rectangle.y = 30;
    rectangle.fill("#f60")
    container.addChild(rectangle)
    
    const rectangle1 = new PIXI.Graphics();
    rectangle1.rect(0 , 0 ,30,30)
    rectangle1.x = app.screen.width;
    rectangle1.y = 30;
    rectangle1.fill("blue")

    container.addChild(rectangle1)

    
    await PIXI.Assets.init({
        // Base path for all asset URLs
        basePath: 'http://localhost:5173/',
    });
    
    const texture = await PIXI.Assets.load('bg.jpg')

    const textureBg = new PIXI.Texture(texture)
    

    const backgroundSprite = new PIXI.TilingSprite({
        texture: textureBg,
        width: app.screen.width,
        height: app.screen.height,
    })

    backgroundSprite.tileScale.set(app.screen.width * 2 / textureBg.orig.width, app.screen.height / textureBg.orig.height);

    console.log(texture)
    console.log(app.screen)

    container.addChild(backgroundSprite)


    app.ticker.add((time) => {
       // backgroundSprite.tilePosition.x -= 30
    })

}

onMounted(() => {
    init()
})

</script>


<style>
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html, body, #app{
    height: 100vh;
    width: 100vw;
}
#container{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
}
</style>
